<template>
   <div class="model">
        <div class="stion_box">
            <el-select v-model="station" placeholder="请选择站点" clearable @change="changeStation">
                <el-option v-for="item in stations" :label="item.站名" :value="item.站号" />
            </el-select>
        </div>
        <div class="container_box">
            <div class="lf">
                <div class="website_1">
                    <el-select v-model="website_1" placeholder="请选摄像头" clearable @change="changeWebsite(1)">
                        <el-option v-for="item in 摄像头List" :label="item.camNum+'号摄像头'" :value="item.camNum" />
                    </el-select>
                    <div style="margin-top: 10px">
                        <video id="video" autoplay width="600" height="400" controls></video>
                    </div>
                </div>
                <div class="website_1" style="margin-top: 20px;">
                    <el-select v-model="website_2" placeholder="请选摄像头" clearable @change="changeWebsite(2)">
                        <el-option v-for="item in 摄像头List" :label="item.camNum+'号摄像头'" :value="item.camNum" />
                    </el-select>
                    <div style="margin-top: 10px">
                        <video id="video1" autoplay width="600" height="400" controls></video>
                    </div>
                </div>
            </div>
            <div class="rt">
                <div class="fuel_nozzle_box">
                    <ul v-if="油枪状态List.length > 0">
                        <li v-for="(item, index) in 油枪状态List" :key="index">
                            <p class="title_tabs" :style="getBackgroundColor(item.DOilState)">
                                <span>{{ checkFuelNozzleStatus(item.DOilState) }}</span>
                                <span v-if="item.bt > 0">{{ item.bt }}</span>
                            </p>
                            <p>
                                <span>{{ item.DTGunid }}</span>
                                <span>{{ item.OilName }}</span>
                                <span>{{ item.DGunPrice }}</span>
                            </p>
                            <p v-if="item.DOilState === 2"> <!-- 加油中才显示 -->
                                <span>￥{{ item.DNowMount }}</span>
                                <span class="card_num">卡: {{ item.DNowICNum }}</span>
                            </p>
                            <p v-else>
                                <span v-if="item.bmount">￥{{ item.bmount }}</span>
                                <span v-else></span>
                            </p>
                            <p v-if="item.DOilState === 2">
                                <span>{{ item.DNowLit }}L</span>
                            </p>
                            <p v-else>
                                <span v-if="item.blit">{{ item.blit }}L</span>
                                <span v-else></span>
                            </p>
                        </li>
                    </ul>
                    <p v-else class="no_data">暂无数据</p>
                </div>
                <div class="order_box">
                    <div class="order_tabs">
                        <span :class="{active: activeTab === '未支付'}" @click="tabsClick('未支付')">未支付({{ 未支付List.length }})</span>
                        <span :class="{active: activeTab === '已支付'}" @click="tabsClick('已支付')">已支付({{ 已支付List.length }})</span>
                    </div>
                    <div v-if="activeTab === '未支付'" class="order_content">
                        <ul>
                            <li v-for="(item, index) in 未支付List" :key="index">
                                <div class="row_1">
                                    <p>
                                        <span>{{ item.bmachid }}</span>
                                        <span>{{ item.boilname }}</span>
                                    </p>
                                    <p>
                                        <span>{{ timestampToTime(item.bfinishtime) }}</span>
                                    </p>
                                </div>
                                <div class="row_2">
                                    <p>
                                        <span>{{ item.blit }}L</span>
                                        <span>￥{{ item.bmount }}</span>
                                    </p>
                                    <p class="row_2_p">
                                      <span v-if="item.cname !== '无卡'">卡: {{ item.bygicnum }}({{ item.cname }})</span>
                                    </p>
                                </div>
                                <div class="row_3">
                                    <p>
                                        <span>流水号: {{ item.bfluid }}</span>
                                        <span>未收款</span>
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div v-else class="order_content">
                        <ul>
                            <li v-for="(item, index) in 已支付List" :key="index">
                                <div class="row_1">
                                    <p>
                                        <span :style="{background: item.z收款方式 === 'IC卡收款' ? '#fa541c' : '#5abb2a'}">{{ item.z枪号 }}</span>
                                        <span>{{ item.z油品 }}</span>
                                        <span style="margin-left: 10px">{{ item.z升数 }}L</span>
                                    </p>
                                    <p>
                                        <span>{{ item.z收款时间.slice(11) }}</span>
                                    </p>
                                </div>
                                <div id="content" class="row_2">
                                    <div class="div_1" style="padding: 0 15px;position: relative;">
                                        <p>
                                            <!-- <span>￥{{ item.z油品实收 ? item.z油品实收 : item.z总实收金额 }}</span> -->
                                            <span>￥{{ item.z总实收金额 }}</span>
                                            <span>￥{{ item.z油机金额 }}</span>
                                        </p>
                                        <p>
                                            <span>￥{{ item.z非油品金额 ? item.z非油品金额 : 0 }}</span>
                                        </p>
                                        <p class="card_money">
                                          <span>卡:{{ item.z卡号 }}({{ item.z姓名 }}) 余额:{{ item.z余额 }}</span>
                                          <span v-if="item.z车号.trim() !== ''" class="chepai">车牌: {{ item.z车号 }}</span>
                                        </p>
                                    </div>
                                </div>
                                <div class="row_3">
                                    <p>
                                        <span>单号:  {{ item.z单号 }}</span>
                                        <span style="background-color: #67c23a;">{{ item.z收款方式 }}</span>
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
   </div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, toRefs, watch,
} from 'vue';
import { ElSelect, ElOption } from 'element-plus';
import './webrtcstreamer.js';
import './adapter.min.js';
import { getDynamicMachAndBill, getDynamicCamList, getInetadress } from '../../../../api/dataScreen';

export default defineComponent({
  props: {
    stations: {
      type: Array,
      default: '',
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const station = ref(1);
    const activeTab = ref('未支付');
    const website_1 = ref();
    const rtsp_1 = ref();
    const rtsp_2 = ref();
    const website_2 = ref();
    let webRtcServer: { connect: (arg0: any) => void; }|null = null;
    let webRtcServer1 = null;
    const 油枪状态List = ref<any[]>([]);
    const 已支付List = ref<any[]>([]);
    const 未支付List = ref<any[]>([]);
    const 摄像头List = ref<arry[]>([]);
    const intervalId = ref(null);
    // 切换站点
    async function changeStation() {
      try {
        const params = {
          station: station.value,
        };
        const arr = await getDynamicCamList(params);
        摄像头List.value = arr.data;
        const res = await getDynamicMachAndBill(params);
        const data = JSON.parse(res);
        油枪状态List.value = data.data.data[0];
        油枪状态List.value.sort((obj1, obj2) => obj1.DTGunid - obj2.DTGunid);
        已支付List.value = data.data.data[1][0];
        未支付List.value = data.data.data[1][1];
        油枪状态List.value.forEach((item, index) => {
          油枪状态List.value[index].bt = 0; // 初始化 bt 属性为 0
          for (let i = 0; i < 未支付List.value.length; i++) {
            if (item.DTGunid === 未支付List.value[i].bmachid) {
              油枪状态List.value[index].bt++;
              // 油枪状态List.value[index].bygicnum = 未支付List.value[i].bygicnum;
              // 油枪状态List.value[index].cname = 未支付List.value[i].cname;
            }
          }
        });
        console.log(油枪状态List.value)
        const filteredArr = Object.values(未支付List.value.reduce((acc, cur) => {
          if (!acc[cur.bmachid] || acc[cur.bmachid].bminusictime < cur.bminusictime) {
            acc[cur.bmachid] = cur;
          }
          return acc;
        }, {}));
        console.log(filteredArr)
        filteredArr.forEach((item) => {
          if (油枪状态List.value[item.bmachid - 1]) {
            油枪状态List.value[item.bmachid - 1].blit = item.blit;
            油枪状态List.value[item.bmachid - 1].bmount = item.bmount;
          }
        });
      } catch (error) {
        油枪状态List.value = [];
        已支付List.value = [];
        未支付List.value = [];
      }
    }
    changeStation();
    const startInterval = () => {
      // 如果已经有定时器在运行，先清除它
      if (intervalId.value) {
        clearInterval(intervalId.value);
      }
      // 启动新的定时器
      intervalId.value = setInterval(() => {
        changeStation();
      }, 4000);
    };
    // 1号摄像头
    function changeWebsite(val: number) {
      if (val === 1) {
        // console.log('1号', website_1.value);
        摄像头List.value.forEach((item) => {
          if (website_1.value === item.camNum) {
            rtsp_1.value = item.rstp;
            webRtcServer.connect(rtsp_1.value);
          }
        });
        // rtsp_1.value = 'rtsp://192.168.101.27:10001/test/';
      } else {
        摄像头List.value.forEach((item) => {
          if (website_2.value === item.camNum) {
            rtsp_2.value = item.rstp;
            webRtcServer1.connect(rtsp_2.value);
          }
        });
        // rtsp_2.value = 'rtsp://192.168.101.27:10001/test/';
      }
    }
    // 点击tabs查询
    function tabsClick(val: string) {
      activeTab.value = val;
    }
    // 判断油枪状态
    function checkFuelNozzleStatus(val: number) {
      if (val === 0) {
        return '无油机';
      }
      if (val === 1) {
        return '空闲中';
      }
      if (val === 2) {
        return '加油中';
      }
      if (val === 3) {
        return '加油结束';
      }
      if (val === 4) {
        return '已读卡';
      }
      if (val === 5) {
        return '提枪出错';
      }
      if (val === 6) {
        return '关机时间';
      }
      if (val === 7) {
        return '申请延期';
      }
      return '采集器断开';
    }
    // 判断油枪状态颜色
    // eslint-disable-next-line consistent-return
    function getBackgroundColor(oilState) {
      // 根据不同的 oilState 返回不同的背景颜色
      if (oilState === 4) {
        return { backgroundColor: '#13c2c2' };
      } if (oilState === 1) {
        return { backgroundColor: '#53c7a0' };
      } if (oilState === 2) {
        return { backgroundColor: '#ffb107' };
      }
      return { backgroundColor: '#f5222d' };
    }
    // 转时间戳
    function timestampToTime(timestamp: number) {
      const date = new Date(timestamp);
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      const time = `${hours}:${minutes}:${seconds}`;
      return time;
    }
    onMounted(async () => {
      startInterval();
      const ip = await getInetadress();
      webRtcServer = new WebRtcStreamer(
        'video',
        `${location.protocol}//${ip}:8000`,
      );
      //   webRtcServer.connect(rtsp_1.value);
      webRtcServer1 = new WebRtcStreamer(
        'video1',
        `${location.protocol}//${ip}:8000`,
      );
    //   webRtcServer1.connect(rtsp_2.value);
    });
    // eslint-disable-next-line global-require
    watch(() => props.dialogVisible, async (val) => {
      if (!val) {
        if (intervalId.value) {
          clearInterval(intervalId.value);
        }
        webRtcServer = null;
        webRtcServer1 = null;
        // webRtcServer.disconnect();
        // webRtcServer1.disconnect();
      } else {
        startInterval();
      }
    });
    return {
      station,
      changeStation,
      website_1,
      website_2,
      changeWebsite,
      tabsClick,
      activeTab,
      油枪状态List,
      已支付List,
      未支付List,
      checkFuelNozzleStatus,
      timestampToTime,
      摄像头List,
      webRtcServer,
      webRtcServer1,
      intervalId,
      startInterval,
      getBackgroundColor,
    };
  },
  components: {
    ElSelect,
    ElOption,
  },
});
</script>
<style>
   .model .stion_box .el-select .el-input__inner{
            height: 50px;
        }
        .model .website_1 .el-select .el-input__inner{
            height: 35px;
            width: 160px;
        }
</style>

<style lang="scss" scoped>
    .model{
        width: 100%;
        height: 100%;
        .stion_box{
            text-align: center;
            margin-bottom: 50px;
        }
    }
    .container_box{
        display: flex;
        .lf{
            width: 42%;
            // height: 500px;
            margin-right: 3%;
            // border: 1px solid #333;
        }
        .rt{
            width:55%;
            // height: 500px;
            border: 1px solid #c1c1c1;
            display: flex;
            .fuel_nozzle_box{
                display: flex;
                flex: 2;
                ul{
                    width: 100%;
                    list-style: none;
                    padding: 0;
                    margin: 0;
                    height: 982px;
                    overflow-y: scroll;
                    li{
                        width: 165px;
                        height: 165px;
                        margin: 5px;
                        float: left;
                        border-radius: 5px;
                        -webkit-box-shadow: 0 0.02rem 0.03rem 0 rgba(0, 0, 0, 0.125);
                        box-shadow: 0 0.02rem 0.03rem 0 rgba(0, 0, 0, 0);
                        background: #fff;
                        position: relative;
                        p{
                            margin: 0;
                            &:nth-child(1) {
                                background: #f5222d;
                                color: white;
                                height: 22px;
                                line-height: 22px;
                                text-align: center;
                                border-top-left-radius: 5px;
                                border-top-right-radius: 5px;
                            }
                            &:nth-child(2) {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                padding: 5px;
                                span{
                                    &:nth-child(1) {
                                        font-size: 22px;
                                        font-weight: bold;
                                        color: #333;
                                    }
                                    &:nth-child(2) {
                                        font-size: 16px;
                                        font-weight: bold;
                                        color: #333;
                                    }
                                    &:nth-child(3) {
                                        color: red;
                                        font-weight: bold;
                                    }
                                }
                            }
                            &:nth-child(3) {
                                text-align: center;
                                margin-top: 20px;
                                margin-bottom: 20px;
                                span{
                                    font-size: 20px;
                                    font-weight: bold;
                                    color: red;
                                }
                            }
                            &:nth-child(4) {
                                text-align: center;
                                span{
                                    font-size: 15px;
                                    font-weight: bold;
                                    color: #333;
                                }
                            }
                        }
                    }
                }
            }
            .order_box {
                display: flex;
                flex-direction: column;
                flex: 1;
                .order_tabs{
                    display: flex;
                    padding: 10px 0 0 10px;
                    span{
                        width: 120px;
                        height: 32px;
                        // border: 1px solid #DCDFE6;
                        color: #333;
                        text-align: center;
                        line-height: 32px;
                        cursor: pointer;
                        background: #fff;
                        &:nth-child(1) {
                            border-right: none;
                            border-top-left-radius: 4px;
                            border-bottom-left-radius: 4px;
                        }
                        &:nth-child(2) {
                            border-top-right-radius: 4px;
                            border-bottom-right-radius: 4px;
                        }
                    }
                }
                .order_content{
                    ul{
                        list-style: none;
                        padding: 0;
                        margin: 0;
                        height: 940px;
                        overflow-y: scroll;
                        li{
                            width: 250px;
                            background: #fff;
                            border: 1px solid #e8e8e8;
                            margin-top: 7px;
                            border-radius: 5px;
                            padding: 5px;
                            position: relative;
                         
                            .row_1{
                                display: flex;
                                justify-content: space-between;
                                p{
                                    margin: 0;
                                  &:nth-child(1) {
                                    span{
                                        display: inline-block;
                                        &:nth-child(1) {
                                            width: 36px;
                                            height: 36px;
                                            font-size: 22px;
                                            font-weight: bold;
                                            border-radius: 100%;
                                            margin-right: 10px;
                                            color: #fff;
                                            text-align: center;
                                            line-height: 36px;
                                            background: #5abb2a;
                                        }
                                    }
                                  }
                                  &:nth-child(2) {
                                    span{
                                        line-height: 36px;
                                    }
                                  }
                                }
                            }
                            .row_2{
                                p{
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    height: 50px;
                                    span{
                                        &:nth-child(1) {
                                            font-size: 18px;
                                            color: rgb(1, 46, 112);
                                        }
                                        &:nth-child(2) {
                                            font-size: 22px;
                                            color: red;
                                        }
                                    }
                                }
                            }
                            .row_3{
                                p{
                                    display: flex;
                                    justify-content: space-between;
                                    margin: 0;
                                    span{
                                        display: inline-block;
                                        &:nth-child(1) {
                                            font-size: 12px;
                                        }
                                        &:nth-child(2) {
                                            font-size: 12px;
                                            background-color: #f56c6c;
                                            border-color: #f56c6c;
                                            color: #fff;
                                            padding: 3px 5px;
                                            border-radius: 3px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    /* 宽度、高度和颜色 */
::-webkit-scrollbar {
  width: 6px; /* 宽度 */
  height: 6px; /* 高度 */
}

/* 滑道 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 背景颜色 */
}

/* 滑块 */
::-webkit-scrollbar-thumb {
  background: #888; /* 滑块颜色 */
  border-radius: 6px; /* 圆角 */
}

/* 滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 悬停时的颜色 */
}
    .video-js {
        height: 420px !important;
    }
    .active{
        background-color: #01aae6 !important;
        color: white !important;
        // border: none !important;
    }
    #content{
        div{
            display: flex;
            justify-content: space-between;
            position: relative;
            p{
                &:nth-child(1) {
                    span{
                        &:nth-child(1) {
                            color: red;
                            font-size: 22px;
                        }
                        &:nth-child(2) {
                            color: gray;
                            text-decoration: line-through;
                            font-size: 18px;
                        }
                    }
                }
                &:nth-child(2) {
                    span{
                        color: #333;
                    }
                }
            }
        }
        .card_info{
                position: absolute;
                bottom: 7px;
                font-size: 12px;
            }
    }
    .no_data{
        width: 100%;
        text-align: center;
        font-size: 30px;
        margin-top: 200px;
    }
    .title_tabs{
      display: flex;
      span{
        &:nth-child(1) {
          display: flex;
          flex: 1;
          justify-content: center;
        }
        &:nth-child(2) {
          display: flex;
          background: #f56c6c;
          color: white;
          font-size: 12px;
          text-align: center;
          border-radius: 50%;
          font-weight: bold;
          width: 17px;
          height: 17px;
          line-height: 15px;
          justify-content: center;
          align-items: center;
          position: relative;
          top: 3px;
          right: 5px;
        }
      }
    }
    .row_2_p{
      position: absolute;
      margin: 0;
      left: 0;
      top: 60px;
      right: 0;
      bottom: 0;
      margin: auto;
      span{
        font-size: 12px !important;
      }
    }
    .card_money{
      position: absolute;
      margin: 0;
      top: 34px;
      span{
        font-size: 12px !important;
      }
    }
    .chepai{
      position: absolute;
      top: 32px;
      color: #012e70 !important;
    }
    .card_num{
      position: absolute;
      font-size: 12px !important;
      color: #333 !important;
      top: 110px;
      left: 0;
      right: 0;
      bottom: 0;
    }
</style>
